<template>
  <el-dialog title="选择经纬度" v-model="visible" class="dialog-lg" append-to-body @close="visible = false">
    <div style="position: relative">
      <div id="coord-select-container"></div>
      <div class="coord-tip">当前位置：{{ centerCoord.longitude }},{{ centerCoord.latitude }}</div>
      <div class="text-center mt-30px" v-if="!disabled">
        <el-button type="primary" @click="selectOver">确定</el-button>
        <el-button @click="visible = false">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup name="CoordSelect">
  import AMapLoader from '@amap/amap-jsapi-loader'

  const props = defineProps({
    latitude: Number | String,
    longitude: Number | String,
    disabled: Boolean
  })

  const visible = defineModel()
  const { proxy } = getCurrentInstance()
  let map = null
  let mapObj = null
  let marker = null
  const centerCoord = ref({ longitude: '', latitude: '' })

  let initCenter = [116.397477, 39.908692]

  onMounted(() => {
    if (props.latitude && props.longitude) {
      initCenter = [parseFloat(props.longitude), parseFloat(props.latitude)]
    }

    window._AMapSecurityConfig = {
      securityJsCode: '密钥'
    }
    AMapLoader.load({
      key: 'key', //必填
      version: '2.0', //必填
      plugins: ['AMap.ToolBar', 'AMap.HawkEye'] // 插件
    })
      .then(AMap => {
        mapObj = AMap
        map = new AMap.Map('coord-select-container', {
          zoom: 16,
          center: initCenter
        })
        map.addControl(
          new AMap.ToolBar({
            position: {
              top: '50%',
              right: '10px'
            }
          })
        )
        map.addControl(new AMap.HawkEye())

        centerCoord.value = {
          longitude: initCenter[0],
          latitude: initCenter[1]
        }
        map.on('complete', function () {
          addMarket()
        })
        if (!props.disabled) {
          map.on('mapmove', function () {
            addMarket()
          })
        }
      })
      .catch(e => {
        proxy.$modal.msgError(e.message)
      })
  })

  function addMarket() {
    if (!map) return
    const centerObj = map.getCenter()
    centerCoord.value = {
      longitude: centerObj.lng,
      latitude: centerObj.lat
    }
    if (!marker) {
      marker = new mapObj.Marker({
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        position: [centerCoord.value.longitude, centerCoord.value.latitude],
        anchor: 'bottom-center'
      })

      map.add(marker)
    } else {
      marker.setPosition([centerCoord.value.longitude, centerCoord.value.latitude])
    }
  }

  const emit = defineEmits(['submit'])
  function selectOver() {
    emit('submit', centerCoord.value)
    visible.value = false
  }

  onUnmounted(() => {
    map?.destroy()
  })
</script>

<style lang="scss" scoped>
  .coord-tip {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    border-radius: 4px;
    background-color: white;
    width: auto;
    box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
  }

  #coord-select-container {
    margin: -10px -20px;
    width: calc(100% + 40px);
    height: calc(90vh - 120px);
    min-height: 500px;
  }
</style>
